/*
 * @Description: Echarts图表模型js
 * @Author: Huang Junjie
 * @Date: 2021-06-03 12:11:45
 * @LastEditTime: 2021-06-24 17:49:05
 * @LastEditors: Huang Junjie
 */
// 引入echarts
const echarts = require('echarts');

// 接触网检测进度统计 - 柱状图
export function ColumnChart01(myChart, xAxisData) {
  myChart.clear();
  myChart.setOption({
    grid: {
      top: 30,
      left: 0,
      right: 0,
      bottom: 0,
      containLabel: true
    },
    legend: {
      show: false,
      left: 150,
      bottom: 0,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 35,
      textStyle: {
        color: '#ffffff'
      }
    },
    tooltip: {
      show: false,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: true,
        alignWithLabel: true,
        inside: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 0.37
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 0.37
        }
      },
      axisLabel: {
        textStyle: {
          color: '#ffffff'
        }
      },
      data: xAxisData
    },
    yAxis: {
      show: true,
      type: 'value',
      splitNumber: 10,
      min: 0,
      max: 1000,
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value}',
        textStyle: {
          color: '#ffffff'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 0.37
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#7d89a9',
          width: 1,
          opacity: 0.37
        }
      }
    },
    series: [
      {
        name: '完成',
        type: 'bar',
        stack: 'total',
        barWidth: '50px',
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: '14px',
              color: '#ffffff'
            },
            formatter: '完成\n{c}'
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: '#2d6dd4' },
                { offset: 1, color: '#3980f3' }
              ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            ),
            barBorderRadius: [0, 0, 0, 0]
          }
        },
        data: [520, 365, 365, 365, 590, 590]
      },
      {
        name: '总数',
        type: 'bar',
        stack: 'total',
        barWidth: '50px',
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: '14px',
              color: '#ffffff'
            },
            formatter: '80%'
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              [
                { offset: 0, color: '#0d275f' },
                { offset: 1, color: '#0d275f' }
              ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
            ),
            barBorderRadius: [0, 0, 0, 0]
          }
        },
        data: [300, 300, 300, 300, 300, 300]
      }
      // {
      //   name: '本月',
      //   type: 'bar',
      //   barWidth: '10px',
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(
      //         0, 0, 1, 0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
      //         [
      //           { offset: 0, color: '#087278' },
      //           { offset: 1, color: '#02c3bc' }
      //         ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
      //       ),
      //       barBorderRadius: [20, 20, 20, 20]
      //     }
      //   },
      //   data: data[1]
      // }
    ]
  });

  // 解决自适应
  setTimeout(function() {
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }, 500);
}
